<template>
	<header>
		<div class="logo-login">
			<div class="logo">
				<router-link to="/"><img src="../assets/img/logo.png" alt="短视频" /></router-link>
			</div>
			<div class="login" v-if="!login">
				<a class="login-reg" @click="$store.state.dialog_reg = true" href="javascript:void(0);">注册</a>
				<a class="login-btn" @click="$store.state.dialog_login = true" href="javascript:void(0);">登录</a>
			</div>
			<div class="userinfo" v-else>
				<router-link to="/store">
					<div class="avatar">
						<img :src="userInfo.head_img?imgBaseUrl+userInfo.head_img:avatarPng" />
					</div>
					{{ userInfo && userInfo.username }}
				</router-link>
			</div>
		</div>

		<div class="nav-shell">
			<div class="nav">
				<ul class="ul">
					<li class="li" v-for="(item,index) in menu" :key="item.menu_id">
						<router-link class="linkTo" :to="item.linkTo" :exact="index == 0">{{ item.menu_name }}</router-link>
					</li>
				</ul>
				<!-- <div class="search clear">
					<input class="txt" type="text" />
					<a class="btn" href="javascript:void(0);"><i class="el-icon-search"></i></a>
				</div> -->
			</div>
		</div>
		
		<div class="dialog dialog-login" v-show="dialog_login">
			<h4>登录</h4>
			<div class="dialog-close" @click="dialog">×</div>
			<el-form :model="formLogin" :rules="fromLoginRules" ref="formLogin" label-position="left" label-width="0px" class="demo-ruleForm login-container">
				<el-form-item prop="mobile">
					<el-input type="text" v-model="formLogin.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="formLogin.password" auto-complete="off" placeholder="请输入密码"></el-input>
				</el-form-item>
				<div class="clear">
					<span class="to toReg" @click="toPassword">忘记密码？</span>
					<el-checkbox v-model="checked" class="remember">记住密码</el-checkbox>
				</div>
				<el-form-item>
					<el-button type="primary" style="width:100%; margin-top: 10px;" @click.native.prevent="loginFn('formLogin')" :loading="loading">登录</el-button>
					还没有账号？<span class="to" @click="toReg">立即注册</span>
				</el-form-item>
			</el-form>
		</div>

		<div class="dialog dialog-reg" v-show="dialog_reg">
			<h4>注册</h4>
			<div class="dialog-close" @click="dialog">×</div>
			<el-form :model="formReg" :rules="fromLoginRules" ref="formReg" label-position="left" label-width="0px" class="demo-ruleForm login-container">
				<el-form-item prop="mobile">
					<el-input type="text" v-model="formReg.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="formReg.password" auto-complete="off" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item prop="send">
					<el-input v-model="formReg.send" auto-complete="off" placeholder="请输入验证码">
						<el-button slot="append" @click="getCheck">获取验证码</el-button>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width:100%; margin-top: 10px;" @click.native.prevent="registerFn('formReg')" :loading="loading">注册</el-button>
					已有短视频账号？点此<span class="to" @click="toLogin">登录</span>
				</el-form-item>
			</el-form>
		</div>
		<div class="dialog dialog-password" v-show="dialog_password">
			<h4>找回密码</h4>
			<div class="dialog-close" @click="dialog">×</div>
			<el-form :model="formPassword" :rules="formPasswordRules" ref="formPassword" label-position="left" label-width="0px" class="demo-ruleForm login-container">
				<el-form-item prop="mobile">
					<el-input type="text" v-model="formPassword.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item prop="pw">
					<el-input type="password" v-model="formPassword.pw" auto-complete="off" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item prop="pw2">
					<el-input type="password" v-model="formPassword.pw2" auto-complete="off" placeholder="请再次输入密码"></el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input v-model="formPassword.code" auto-complete="off" placeholder="请输入验证码">
						<el-button slot="append" @click="getForgetCheck">获取验证码</el-button>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width:100%; margin-top: 10px;" @click.native.prevent="forgetReset('formPassword')" :loading="loading">确定</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="dialog-bg" v-if="dialog_login||dialog_reg||dialog_password" @click="dialog"></div>
	</header>
</template>

<script>
import { submit, update, resetpw, check, register, forget_check, forget_reset, getmenu, imgBaseUrl } from '@/api';
import { mapState, mapMutations, mapActions } from 'vuex'
import avatarPng from '@/assets/img/avatar.png'
export default {
	data () {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
			if (this.formPassword.pw2 !== '') {
				this.$refs.formPassword.validateField('pw2');
			}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formPassword.pw) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			imgBaseUrl,
			avatarPng,
			// 登录
			menu: [],
			checked: false,
			loading: false,
			formLogin: {
				mobile: '',
				password: ''
			},
			fromLoginRules: {
				mobile: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					//{ validator: validaePass }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					//{ validator: validaePass2 }
				]
			},

			// 注册
			formReg: {
				mobile: '',
				password: ''
			},
			fromLoginRules: {
				mobile: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					//{ validator: validaePass }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					//{ validator: validaePass2 }
				],
				send: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
				]
			},
			// 找回密码
			formPassword: {
				mobile: '',
				pw: '',
				pw2: '',
				code: '',
			},
			formPasswordRules: {
				mobile: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
				],
				pw: [
					{ validator: validatePass, trigger: 'blur' }
				],
				pw2: [
					{ validator: validatePass2, trigger: 'blur' }
				],
				code: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
				]
			},
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login',
			'dialog_reg',
			'dialog_login',
			'dialog_password',
		]),
	},
	mounted() {
		this.getUserInfo();
		this.setMenu();
	},
	methods: {
		...mapActions([
			'getUserInfo'
		]),
		...mapMutations([
			'RECORD_USERINFO',
			'OUT_LOGIN',
		]),
		dialog(){
			this.$store.state.dialog_reg = false;
			this.$store.state.dialog_login = false;
			this.$store.state.dialog_password = false;
			this.resetForm('formLogin');
			this.resetForm('formReg');
		},
		toReg(){
			this.$store.state.dialog_reg = true;
			this.$store.state.dialog_login = false;
			this.$store.state.dialog_password = false;
		},
		toLogin(){
			this.$store.state.dialog_reg = false;
			this.$store.state.dialog_login = true;
			this.$store.state.dialog_password = false;
		},
		toPassword(){
			this.$store.state.dialog_reg = false;
			this.$store.state.dialog_login = false;
			this.$store.state.dialog_password = true;
		},
		getCheck(){
			let para = {
				mobile : this.formReg.mobile
			}
			check(para).then(res => {
				if(res.data){
					this.$message.success(res.msg);
				}else if(res.msg === '短信发送失败'){
					this.$message.warning('请确认手机号输入正确');
				}else{
					this.$message.warning(res.msg);
				}
			});
		},
		getForgetCheck(){
			let para = {
				mobile : this.formPassword.mobile
			}
			forget_check(para).then(res => {
				if(res.data){
					this.$message.success(res.msg);
				}else if(res.msg === '短信发送失败'){
					this.$message.warning('请确认手机号输入正确');
				}else{
					this.$message.warning(res.msg);
				}
			});
		},
		forgetReset(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true;
					let para = Object.assign({}, this[formName]);
					forget_reset(para).then(res => {
						this.loading = false;
						if(res.data){
							this.$message.success(res.msg);
							this.resetForm(formName);
							this.$store.state.dialog_password = false;
							// let userInfo = Object.assign({}, res.data);
							// this.RECORD_USERINFO(userInfo);
						}else{
							this.$message.warning(res.msg);
						}
					})

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		registerFn(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true;
					let para = Object.assign({}, this[formName]);
					register(para).then(res => {
						this.loading = false;
						if(res.data){
							this.$message.success(res.msg);
							this.resetForm(formName);
							this.$store.state.dialog_reg = false;

							let userInfo = Object.assign({}, res.data);
							this.RECORD_USERINFO(userInfo);
						}else{
							this.$message.warning(res.msg);
						}
					})

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		loginFn(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true;
					var para = Object.assign({}, this[formName]);
					submit(para).then(res => {
						this.loading = false;
						let { data, msg, sessionid } = res;
						if (!data) {
							this.$message.warning(msg);
						} else {
							this.resetForm(formName);
							this.$store.state.dialog_login = false;
							let userInfo = Object.assign({}, res.data);
							userInfo.sessionid = res.sessionid;
							this.RECORD_USERINFO(userInfo);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		// 重置 
		resetForm(formName){
			this.$refs[formName].resetFields();
		},
		
		setMenu(){
			// 获取导航信息
			getmenu().then(res =>{
				if(res.data){
					this.menu = res.data
					// 导航显示几个频道
					let nav = res.data;
					nav.reverse();
					nav.length = 12;
					for(let i=0; i<nav.length; i++){
						if(i === 0){
							nav[i].linkTo = { path: `/`} ;
						}else if(nav[i].menu_id === 5) {
							nav[i].linkTo = { path: `/subject`};
						}else if(nav[i].menu_id === 9) {	
							nav[i].linkTo = { path: `/ip`};
						}else if(nav[i].menu_id === 14) {
							nav[i].linkTo = { path: `/ranking`}; // 暂定
						}else {
							nav[i].linkTo = { path: `/channel/${nav[i].menu_id}`} ;
							// nav[i].linkTo = `/channel_${nav[i].menu_id}/${nav[i].menu_id}`;
						}
					}
					this.menu = nav;
				}else{
					this.$message.warning(res.msg);
				}
			});
		}
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.logo-login {
	position: relative;
	top: 0;
	left: 0;
	width: 1200px;
	margin: 0 auto;
	padding: 10px 0;
	// height: 32px;
	.logo {
		width: 166px;
		height: 40px;
	} 
	.login {
		position: absolute;
		top: 15px;
		right: 0;
		height: 32px;
		.login-btn {
			display: inline-block;
			height: 32px;
			line-height: 32px;
			padding: 0 15px;
			box-sizing: border-box;
			border: 1px solid #f86254;
			border-radius: 3px;
			color: #f86254;
		}
		.login-btn:hover {
			color: #fff;
			background:#f86254;
		}
		.login-reg {
			margin-right: 10px;
		}
		.login-reg:hover {
			color:#f86254;
		}
	}
	.userinfo {
		position: absolute;
		top: 10px;
		right: 0;
		height: 40px;
		line-height: 40px;
		.avatar {
			width: 30px;
			height: 30px;
			overflow: hidden;
			border-radius: 50%;
			float:left;
			margin-right: 5px;
			margin-top: 5px;
		}
		.el-dropdown {
			color: #f86254;
			cursor: pointer;
		}
	}
}
.toReg {
	float:right;
}
.to {
	color:#f86254;
	cursor: pointer;
}

.nav-shell {
	width: 100%;
	height: 45px;
	background: #453246;
	// border-bottom: 5px solid #2d95ac;
	.nav {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.ul {
			display: flex;
			width: 1000px;
			.linkTo {
				display: block;
				height: 45px;
				overflow: hidden;
				line-height: 45px;
				padding: 0 22px;
				color: #fff;
				box-sizing: border-box;
				cursor: pointer;
			}
			.linkTo:hover {
				background: #f86254;
			}
			
			.linkTo.router-link-active {
				background: #f86254;
			}
		}
		.search {
			width: 224px;
			height: 35px;
			background: #fff;
			border-radius: 50px;
			overflow: hidden;
			box-sizing: border-box;
			padding: 5px 13px;
			margin-top: 5px;
			.txt {
				height: 23px;
				line-height: 23px;
				// background: red;
				border: none;
				color: #f86254;
			}
			.btn {
				float: right;
				text-align: center;
				// background: green;
				height: 25px;
				width: 25px;
				font-size: 18px;
				color: #f86254;
			}
		}
	}
}
.dialog-bg {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.dialog {
	width: 340px;
	padding: 40px;
	background: #fff;
	border-radius: 5px;
	z-index: 999;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	// margin-left: -175px;
	transform: translate(-50%,-50%);
	h4 {
		text-align: center;
		font-size: 18px;
		line-height: 18px;
		color:#919191;
		padding-bottom: 22px;
	}
}
.dialog-close{
	position: absolute;
	right: 15px;
	top: 15px;
	cursor: pointer;
	font-size: 18px;
	display: block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	color:#919191;
}
</style>
